<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "h5-hk-video",
  props: {
    preUrl: {
      type: String,
    },
  },
  data() {
    return {
      // 播放器对象
      player: null,
      id: 'player'
    };
  },
  mounted() {
    this.id = 'player-' + Date.now() + '-' + Math.random().toString().substr(2)
    this.$nextTick(() => {
      this.initPlayer();
    });
  },
  methods: {
    /**
     * 初始化播放器
     */
    initPlayer() {
      this.player = new window.JSPlugin({
        // 需要英文字母开头 必填
        szId: this.id,
        // 必填,引用H5player.min.js的js相对路径
        szBasePath: "/h5player",
 
        // // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
        // iWidth: 600,
        // iHeight: 400,
 
        // // 分屏播放，默认最大分屏4*4
        // iMaxSplit: 16,
        // iCurrentSplit: 1,
 
        // // 样式
        // oStyle: {
        //   border: '#343434',
        //   borderSelect: '#FFCC00',
        //   background: '#000'
        // }
      });
      this.initPlugin();
    },
    /**
     * 事件初始化
     */
    initPlugin() {
      this.player.JS_SetWindowControlCallback({
        windowEventSelect(iWindIndex) {
          // 插件选中窗口回调
          console.log("windowSelect callback: ", iWindIndex);
        },
        pluginErrorHandler(iWindIndex, iErrorCode, oError) {
          // 插件错误回调
          console.error(
            `window-${iWindIndex}, errorCode: ${iErrorCode}`,
            oError
          );
        },
        windowEventOver(iWindIndex) {
          // 鼠标移过回调
          // console.log("鼠标移过回调", iWindIndex);
        },
        windowEventOut(iWindIndex) {
          // 鼠标移出回调
          // console.log("鼠标移出回调", iWindIndex);
        },
        windowFullCcreenChange(bFull) {
          // 全屏切换回调
          console.log("全屏切换回调", bFull);
        },
        firstFrameDisplay(iWndIndex, iWidth, iHeight) {
          // 首帧显示回调
          console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
        },
        performanceLack(iWndIndex) {
          // 性能不足回调
          console.log("性能不足回调", iWndIndex);
        },
      });
 
      this.play();
    },
    /**
     * 播放
     */
    play(data) {
      let preUrl;
      if (data != undefined) {
        preUrl = data; // 播放地址
      } else {
        preUrl = this.preUrl; // 播放地址
      }
      console.log('preUrl === ', preUrl)
      const param = {
        playURL: preUrl,
        // 1：高级模式  0：普通模式，高级模式支持所有
        mode: 1,
      };
      // 当前播放窗口下标
      let index = 0;
      // console.log(this.playerArr);
      this.player.JS_Play(preUrl, param, index).then(
        () => {
          // 播放成功回调
          console.log("播放成功");
        },
        (err) => {
          console.log("播放失败");
          console.info("JS_Play failed:", err);
        }
      );
    },
  },
};
</script>